<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>課程評論社群</title>
	<link rel="stylesheet" href="./css/global.css" type="text/css">
	<style type="text/css">
		.submit-container {
			height: 20px;
		}
		
		#regButton {
			float: right;
		}
		
		#regProgress {
			float: right;
		}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="./js/validate/jquery.validate.min.js"></script>
	<script type="text/javascript" src="./js/validate/myValidateMethod.js"></script>
	<script type="text/javascript" src="./js/form/jquery.form.min.js"></script>
	<script type="text/javascript" src="./js/global.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#registerForm").validate({
				focusInvalid: false,
				focusCleanup: true,
				onkeyup: false,
				onclick: false,
				rules: {
					email: {
						required: true,
						email: true,
						rangelength: [1, 100]
					},
					pass: {
						required: true,
						engAndNum: true,
						rangelength: [10, 20]
					},
					confirmPass: {
						equalTo: "#pass"
					},
					nickName: {
						required: true,
						invalidChar: true,
						rangelength: [1, 10]
					}
				},
				messages: {
					email: {
						required: "請填寫此欄位",
						email: "格式不正確",
						rangelength: "長度必須要在1~100之間"
					},
					pass: {
						required: "請填寫此欄位",
						rangelength: "長度必須要在10~20之間"
					},
					confirmPass: {
						equalTo: "與密碼欄位不相同"
					},
					nickName: {
						required: "請填寫此欄位",
						rangelength: "長度必須要在1~10之間"
					}
				},
				errorPlacement: function(label, element) {
					label.css("color", "red");
					label.insertBefore(element);
				},
				submitHandler: function(form) {
					var options = {
							success: function(resp) {
								if (resp == "emailHasBeenUsed") {
									$("#regButton").removeAttr("disabled");
									$("#regProgress").css("display", "none");
									$("#emailUsedLabel").css("display", "block");
								}
								else {
									if (location.href.indexOf("localhost") != -1)
										location.replace("http://localhost:8888/sendConfirmMail");
									else if (location.href.indexOf("coucomm") != -1)
										location.replace("http://coucomm.appspot.com/sendConfirmMail");
								}
							}
					}; 
				
					$("#emailUsedLabel").css("display", "none");
					$("#regButton").attr("disabled", true);
					$("#regProgress").css("display", "block");
					$(form).ajaxSubmit(options);
				}
			});
		});
	</script>
</head>
<body>
	<jsp:include page="./header.jsp"></jsp:include>
	<div id="contents">
		<jsp:include page="./member/login.jsp"></jsp:include>
		<div id="indexContent" class="rightContent">
			<form method="post" action="./register" id="registerForm" class="form-container">
				<div class="form-title"><h2>立刻註冊</h2></div>
				<div class="form-title">電子信箱</div>
				<input class="form-field" type="text" name="email" /><br />
				<div class="form-title">密碼</div>
				<input id="pass" class="form-field" type="password" name="pass" /><br />
				<div class="form-title">確認密碼</div>
				<input class="form-field" type="password" name="confirmPass" /><br />
				<div class="form-title">暱稱</div>
				<input class="form-field" type="text" name="nickName" /><br />
				<div class="submit-container">
					<input id="regButton" class="button rounded green" type="submit" value="註冊" />
					<div id="regProgress" class="facebookG">
						<div class="facebook_blockG blockG_1"></div>
						<div class="facebook_blockG blockG_2"></div>
						<div class="facebook_blockG blockG_3"></div>
					</div>
					<label id="emailUsedLabel" style="color: red; display: none;">這個電子信箱已經有人使用</label>
				</div>
			</form>
		</div>
	</div>
	<jsp:include page="./footer.jsp"></jsp:include>
</body>
</html>